<template>
  <div :class="['panel-components', type === 'default' ? 'default-panel' : 'chart-panel']">
    <div class="panel-wrapper">
      <div class="title-wrapper">
        <h3 class="panel-title">
          <span class="panel-label">
            <slot name="title"></slot>
          </span>
          <slot name="question"></slot>
          <slot name="sub"></slot>
        </h3>
        <div class="panel-picker">
          <slot name="picker" class="picker"></slot>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="panel-content">
          <slot name="content"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Row, Col } from 'element-ui'

export default {
  name: 'panel-components',

  props: {
    type: {
      type: String,
      default: 'default'
    }
  },

  components: {
    elRow: Row,
    elCol: Col
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  .panel-components {
    margin-bottom: 20px;
    &.default-panel {
      background-color: #FFF;
      box-sizing: border-box;
      padding: 20px;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
    }
    .title-wrapper {
      margin-bottom: 15px;
      line-height: 14px;
      &:after {
        content: '';
        display: block;
        visibility: hidden;
        height: 0;
        font-size: 0;
        clear: both;
      }
      .panel-title {
        float: left;
        width: 500px;
        margin: 0;
        font-size: 15px !important;
        line-height: 28px;
        .iconfont {
          margin-left: 3px;
          font-weight: 400 !important;
        }
      }
      .panel-picker {
        float: right;
        // width: 220px;
      }
    }
    .content-wrapper {
      .panel-content {
        width: 100%;
      }
    }
  }
</style>
